<template>
	<view class="container">
		<!-- 页面内容区域 -->
		<view class="page-content">
			<partner v-if="PageCur == 'partner'" :key="'partner-' + refreshKey.partner" />
			<dynamic v-if="PageCur == 'dynamic'" :key="'dynamic-' + refreshKey.dynamic" />
			<live v-if="PageCur == 'live'" :key="'live-' + refreshKey.live" />
			<message v-if="PageCur == 'message'" :key="'message-' + refreshKey.message" />
			<me v-if="PageCur == 'me'" :key="'me-' + refreshKey.me" @refresh="handleMeRefresh" />
		</view>
		<!-- 底部导航栏 -->
		<view class="tabbar-container">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @tap="NavChange" data-cur="partner" :class="{ 'active': PageCur == 'partner' }"
					v-if="globalConfig.examine != 1">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur == 'partner'" src="../../static/tabBar/index_cur.png" mode="aspectFit"
							@error="handleImageError" />
						<image v-else src="../../static/tabBar/index.png" mode="aspectFit" @error="handleImageError" />
					</view>
					<view :class="PageCur == 'partner' ? 'color_main' : 'text-gray'">找搭子</view>
				</view>
				<view class="action" @tap="NavChange" data-cur="dynamic" :class="{ 'active': PageCur == 'dynamic' }">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur == 'dynamic'" src="../../static/tabBar/order_cur.png" mode="aspectFit"
							@error="handleImageError" />
						<image v-else src="../../static/tabBar/order.png" mode="aspectFit" @error="handleImageError" />
					</view>
					<view :class="PageCur == 'dynamic' ? 'color_main' : 'text-gray'">动态</view>
				</view>
				<!-- <view class="action" @tap="NavChange" data-cur="live" :class="{ 'active': PageCur == 'live' }">
          <view class='cuIcon-cu-image'>
            <image v-if="PageCur == 'live'" src="../../static/tabBar/shop_cur.png" mode="aspectFit" @error="handleImageError" />
            <image v-else src="../../static/tabBar/shop.png" mode="aspectFit" @error="handleImageError" />
          </view>
          <view :class="PageCur == 'live' ? 'color_main' : 'text-gray'">直播</view>
        </view> -->
				<view class="action" @tap="NavChange" data-cur="message" :class="{ 'active': PageCur == 'message' }"
					v-if="globalConfig.examine != 1">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur == 'message'" src="../../static/tabBar/order_cur.png" mode="aspectFit"
							@error="handleImageError" />
						<image v-else src="../../static/tabBar/order.png" mode="aspectFit" @error="handleImageError" />
					</view>
					<view :class="PageCur == 'message' ? 'color_main' : 'text-gray'">消息</view>
				</view>
				<view class="action" @tap="NavChange" data-cur="me" :class="{ 'active': PageCur == 'me' }">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur == 'me'" src="../../static/tabBar/me_cur.png" mode="aspectFit"
							@error="handleImageError" />
						<image v-else src="../../static/tabBar/me.png" mode="aspectFit" @error="handleImageError" />
					</view>
					<view :class="PageCur == 'me' ? 'color_main' : 'text-gray'">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import partner from '../partner/index.vue'
	import dynamic from '../dynamic/index.vue'
	import live from '../live/index.vue'
	import message from '../message/index.vue'
	import me from '../me/index.vue'
	import {
		mapGetters,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			partner,
			dynamic,
			live,
			message,
			me
		},
		data() {
			return {
				PageCur: 'partner',
				refreshKey: {
					partner: 0,
					dynamic: 0,
					live: 0,
					message: 0,
					me: 0
				},
				pageLoaded: {
					partner: false,
					dynamic: false,
					live: false,
					message: false,
					me: false
				}
			}
		},
		computed: {
			currentLocation() {
				return this.getLocation;
			},
			// 使用mapGetters获取全局状态
			...mapGetters([
				'getGaodeKey',
				'getSiteName'
			]),

			// 使用mapState直接访问state
			...mapState({
				globalConfig: state => state.config,
				userLocation: state => state.location,
				userInfo: state => state.userInfo,
			})
		},
		onLoad(options) {
			console.log(options);
			if (this.globalConfig.examine == 1) {
				this.PageCur = 'dynamic'
			}
		},
		onShow() {
			uni.$on('refreshPage', this.refreshPage);
			this.refreshCurrentPage();
			
		},
		onUnload() {
			uni.$off('refreshPage', this.refreshPage);
		},
		methods: {
			NavChange(e) {
				let targetPage = typeof e === 'string' ? e : (e.currentTarget && e.currentTarget.dataset.cur);
				if (!targetPage) return;
				if (this.PageCur === targetPage) {
					this.refreshCurrentPage();
					return;
				}
				this.PageCur = targetPage;
				this.refreshCurrentPage();
				this.updatePageTitle(targetPage);
			},
			refreshCurrentPage() {
				this.refreshKey[this.PageCur]++;
				this.pageLoaded[this.PageCur] = true;
			},
			handleMeRefresh() {
				this.refreshKey.me++;
			},
			updatePageTitle(page) {
				let title = '';
				switch (page) {
					case 'partner':
						title = '找搭子';
						break;
					case 'dynamic':
						title = '动态';
						break;
					case 'live':
						title = '直播';
						break;
					case 'message':
						title = '消息';
						break;
					case 'me':
						title = '我的';
						break;
					default:
						title = '找搭子';
				}
				try {
					uni.setNavigationBarTitle({
						title
					});
				} catch (error) {}
			},
			handleImageError(e) {},
			refreshPage(page) {
				if (this.refreshKey[page] !== undefined) {
					this.refreshKey[page]++;
				}
			},
			resetAllPages() {
				Object.keys(this.refreshKey).forEach(key => {
					this.refreshKey[key]++;
				});
				Object.keys(this.pageLoaded).forEach(key => {
					this.pageLoaded[key] = false;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		// height: 100vh;
		background-color: #f5f5f5;
	}

	.page-content {
		flex: 1;
		position: relative;
		/* 移除 overflow: hidden，让子组件自己处理滚动 */
		/* 移除固定高度，使用 flex: 1 自适应 */
	}

	.tabbar-container {
		flex-shrink: 0;
		position: relative;
		z-index: 999;
	}

	.color_main {
		color: #007aff !important;
		font-weight: 600;
	}

	.text-gray {
		color: #8f8f94;
	}

	.cu-bar.tabbar {
		padding: 0;
		background-color: #18181a;
		// border-top: 1rpx solid #e5e5e5;
		height: 120rpx;
		display: flex;
		align-items: center;

		.action {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 12rpx 0 8rpx;
			transition: all 0.3s ease;
			height: 100%;
			color: #fff;

			&.active {
				transform: scale(1.05);
			}

			.cuIcon-cu-image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			view:last-child {
				font-size: 20rpx;
				line-height: 1.2;
				text-align: center;
				transition: color 0.3s ease;
			}

			&:active {
				opacity: 0.7;
			}
		}
	}

	.foot {
		padding-bottom: 0;
	}

	/* 确保子组件能够正常滚动 */
	.page-content>view {
		height: 100%;
		/* 移除 overflow-y: auto，让子组件自己处理 */
	}
</style>